<template>
  <view class="container">
    
    <Card class="form-card">
      <view class="form-group">
        <text class="label">目标标题</text>
        <input 
          class="input" 
          type="text" 
          placeholder="请输入目标标题，如：提高数学成绩" 
          v-model="form.title"
        />
      </view>
      
      <view class="form-group">
        <text class="label">关联学生</text>
        <picker 
          mode="selector" 
          :range="students" 
          @change="onStudentChange"
        >
          <view class="picker">
            {{ selectedStudent || '请选择关联学生' }}
          </view>
        </picker>
      </view>
      
      <view class="form-group">
        <text class="label">目标时间范围</text>
        <view class="date-range">
          <view class="date-picker">
            <picker 
              mode="date" 
              :value="form.startDate" 
              @change="onStartDateChange"
            >
              <view class="picker">
                {{ form.startDate || '开始日期' }}
              </view>
            </picker>
          </view>
          <text class="separator">至</text>
          <view class="date-picker">
            <picker 
              mode="date" 
              :value="form.endDate" 
              @change="onEndDateChange"
            >
              <view class="picker">
                {{ form.endDate || '结束日期' }}
              </view>
            </picker>
          </view>
        </view>
      </view>
      
      <view class="form-group">
        <view class="subject-header">
          <text class="label">科目目标分数</text>
          <Button class="add-btn" type="info" size="small" text="添加科目" @click="addSubject" />
        </view>
        
        <view class="subjects-list">
          <view 
            v-for="(subject, index) in form.subjects" 
            :key="index" 
            class="subject-item"
          >
            <input 
              class="subject-input" 
              type="text" 
              placeholder="科目名称" 
              v-model="subject.name"
            />
            <input 
              class="score-input" 
              type="number" 
              placeholder="目标分数" 
              v-model="subject.score"
            />
            <Button 
              class="remove-btn" 
              type="error" 
              size="small" 
              text="删除" 
              @click="removeSubject(index)"
            />
          </view>
        </view>
      </view>
      
      <view class="form-group">
        <text class="label">目标描述</text>
        <textarea 
          class="textarea" 
          placeholder="请输入目标的详细描述（可选）" 
          v-model="form.description"
        />
      </view>
      
      <Button 
        class="submit-btn" 
        type="primary" 
        text="创建学习目标" 
        :loading="loading"
        @click="handleSubmit"
      />
    </Card>
  </view>
</template>

<script>
export default {
  data() {
    const now = new Date();
    const startDate = now.toISOString().slice(0, 10);
    const endDate = new Date(now.setMonth(now.getMonth() + 4)).toISOString().slice(0, 10);
    
    return {
      form: {
        title: '',
        student: '',
        startDate: startDate,
        endDate: endDate,
        subjects: [
          { name: '', score: '' }
        ],
        description: ''
      },
      students: ['张小明 - 小学五年级', '李小红 - 初中一年级', '王小刚 - 高中二年级'],
      selectedStudent: '',
      loading: false
    };
  },
  
  methods: {
    onStudentChange(e) {
      this.selectedStudent = this.students[e.detail.value];
      this.form.student = this.selectedStudent;
    },
    
    onStartDateChange(e) {
      this.form.startDate = e.detail.value;
    },
    
    onEndDateChange(e) {
      this.form.endDate = e.detail.value;
    },
    
    addSubject() {
      this.form.subjects.push({ name: '', score: '' });
    },
    
    removeSubject(index) {
      if (this.form.subjects.length <= 1) {
        uni.showToast({
          title: '至少保留一个科目',
          icon: 'none'
        });
        return;
      }
      
      this.form.subjects.splice(index, 1);
    },
    
    handleSubmit() {
      if (!this.form.title) {
        uni.showToast({
          title: '请输入目标标题',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.student) {
        uni.showToast({
          title: '请选择关联学生',
          icon: 'none'
        });
        return;
      }
      
      if (!this.form.startDate || !this.form.endDate) {
        uni.showToast({
          title: '请选择完整的时间范围',
          icon: 'none'
        });
        return;
      }
      
      const hasEmptySubject = this.form.subjects.some(subject => !subject.name || !subject.score);
      if (hasEmptySubject) {
        uni.showToast({
          title: '请填写完整的科目信息',
          icon: 'none'
        });
        return;
      }
      
      // 模拟创建过程
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        uni.showToast({
          title: '创建成功',
          icon: 'success'
        });
        
        // 返回目标列表
        setTimeout(() => {
          uni.navigateBack();
        }, 1000);
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: $spacing-lg;
  padding: $spacing-xl 0;
}

.title {
  font-size: $font-size-xl;
  font-weight: bold;
  color: $text-primary;
  display: block;
  margin-bottom: $spacing-sm;
}

.subtitle {
  font-size: $font-size-sm;
  color: $text-secondary;
}

.form-card {
  margin-bottom: $spacing-lg;
}

.form-group {
  margin-bottom: $spacing-lg;
}

.label {
  display: block;
  font-size: $font-size-base;
  color: $text-primary;
  margin-bottom: $spacing-sm;
}

.input, .picker, .textarea {
  width: 100%;
  padding: $spacing-base;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  box-sizing: border-box;
}

.input {
  height: 100rpx;
}

.picker {
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  align-items: center;
}

.textarea {
  height: auto;
  min-height: 120rpx;
}

.date-range {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.date-picker {
  flex: 1;
}

.separator {
  margin: 0 $spacing-base;
  color: $text-secondary;
}

.subject-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-sm;
}

.subject-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: $spacing-sm;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.subject-input, .score-input {
  height: 70rpx;
  padding: 0 $spacing-base;
  border: 1rpx solid $text-tertiary;
  border-radius: $border-radius-base;
  font-size: $font-size-sm;
  box-sizing: border-box;
}

.subject-input {
  flex: 1;
  margin-right: $spacing-sm;
}

.score-input {
  width: 150rpx;
  margin-right: $spacing-sm;
}

.add-btn, .remove-btn {
  height: 70rpx;
}

.subjects-list {
  margin-top: $spacing-sm;
}

.submit-btn {
  margin-top: $spacing-xl;
}
</style>